<template>
	<div class="center_bottom" v-if="pageFlag">
		<el-select v-model="curPeriod" value-key="id" size="small" @change="periodChange($event)"
			:popper-append-to-body="false">
			<el-option v-for="(item, index) in periods" :key="index" :label="item.title" :value="item"></el-option>
		</el-select>
		<InfoCard :info='curPeriod' :height=180 />
	</div>
	<Reacquire v-else @onclick="getData" style="line-height: 200px">
		重新获取
	</Reacquire>
</template>

<script>
	import {
		currentGET
	} from "api";
	import {
		graphic
	} from "echarts";
	export default {
		data() {
			return {
				pageFlag: false,
				periods: [],
				curPeriod: {},
			};
		},
		props: {},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {
				this.pageflag = true;
				currentGET("period").then((res) => {
					if (res.flag) {
						this.pageFlag = true;
						this.periods = res.data
						this.curPeriod = res.data[0]
					} else {
						this.pageflag = false;
						this.$Message({
							text: res.msg,
							type: "warning",
						});
					}
				});
			},
			periodChange(item) {
				this.curPeriod = item
			}
		},
	};
</script>
<style lang="scss" scoped>
	.center_bottom ::v-deep {
		width: 100%;
		height: 100%;

		>.el-select {
			width: 120px;
			position: absolute;
			right: 20px;
			top: 15px;

			.el-input {
				input {
					border-color: #7EB7FD;
					color: #7EB7FD;
				}
			}

			/**修改边框和字体颜色 */
			.el-input__inner {
				background-color: transparent;
				border-color: #7EB7FD;
			}

			//下拉框
			.el-select-dropdown {
				border: none;
				background-color: rgba(1, 28, 82, 0.8);
			}

			//输入框
			.el-input__inner {
				color: #eee;
				border-color: #00fff6;
				background-color: rgba(1, 28, 82, 0.8);
			}

			//聚焦时的样式
			.el-select .el-input.is-focus .el-input__inner {
				border-color: #0B61AA;
				background-color: rgba(1, 28, 82, 0.8);
				color: #00D3E9;
			}

			//下拉框选中
			.el-select-dropdown__item {
				color: #eee;
			}

			//鼠标经过下拉框
			.el-select-dropdown__item.hover,
			.el-select-dropdown__item:hover {
				color: #00D3E9;
				background-color: #0F3360;
			}
		}
	}
</style>